<template>
  <div>
    <!-- 导航区域 -->
    <ul>
      <li>
        <!-- query参数:并非路径当中的一部分 -->
        <router-link to="/home/message/table?car=123">message-01</router-link>
      </li>
      <li>
        <!-- params参数:属于路径当中一部分 -->
        <router-link to="/home/message/table/123">message-02</router-link>
      </li>
      <li>
        <!-- 相当于：级传递params参数有传递query参数-->
        <router-link to="/home/message/table/123?car=123"
          >message-03</router-link
        >
      </li>
      <!-- 底下是编程式导航 -->
      <li>
         <button v-for="(item,index) in list" :key="item.id">
            <span @click="handler1(item)">{{item.car}}</span>
         </button>
      </li>
    </ul>
    <!-- 展示区域 -->
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      list: [
        { id: 1, car: "法拉利" },
        { id: 2, car: "红旗" },
        { id: 3, car: "小鹏" },
        { id: 4, car: "蔚来" },
        { id: 5, car: "理想" },
        { id: 6, car: "特斯拉" },
      ],
    };
  },
  methods: {
    //佩奇按钮的回调函数
    handler() {
      //跳转到table路由组件！！！！
      //编程式导航进行路由跳转：需要利用组件$router属性
      //也就说$router属性可以通过push|replace方法进行路由跳转！！！
      //编程式导航路由跳转与传递参数有三种写法
      //第一种:字符串写法
      //路由没有占位：只能传递query参数
      //路由占位了：可以传递params+query参数
      //this.$router.push('/home/message/table?car='+this.car);//query参数
      //this.$router.push('/home/message/table/'+this.car);//params参数【路由当中必须要占位】
      //this.$router.push('/home/message/table/'+this.car+"?car=666");//params参数 + query参数
      //第二种写法：模板字符串
      //this.$router.push(`/home/message/table/${this.car}?car=${666}`);
      //第三种写法：对象写法********** 工作的时候也是第三种写法【传递对象】
      //this.$router.push({path:"/home/message/table",query:{car:'法拉利',a:1,b:2}});  //query参数
      //底下这种写法：路由跳转传递参数（对象:params参数），不允许这个书写！！！！！
      //对象写法：传递params参数，不能结合path，结合name！！！！
      //this.$router.push({path:'/home/message/table',params:{car:this.car}});//params参数
      //this.$router.push({name:'table',params:{car:this.car}});//params参数正确写法
      //  this.$router.push({name:'table',params:{car:this.car},query:{car:6666}});//即传递params参数、query参数！！！
    },
    handler1(item){
      //点击span跳转到table，且传递相应的汽车
      //push与replace区别??
      //replace与push语法是一模一样的！！！！！
      //push会在浏览器中记录历史记录，replace不会保存历史记录！！！！
      this.$router.replace({name:'table',params:{car:item.car}})
    }
  },
};
</script>

<style scoped>
</style>
